.container {
    height: 100%;

    .header {
        height: 2rem;
        box-sizing: border-box;
        border-bottom: 1px solid rgb(239, 239, 240);

        .search {
            border-radius: 1rem;
            margin: .4rem auto;
            width: 85%;
            background-color: #F5F5F5;
            padding: .25rem .5rem;
            display: flex;
            align-items: center;

            .placeholder {
                padding-left: .2rem;
                color: rgb(153, 153, 153);
                font-size: .7rem;
            }
        }
    }

    .content {
        height: calc(100% - 2rem);
        display: flex;

        .cates {
            box-sizing: border-box;
            flex-basis: 4.2rem;
            height: 100%;
            overflow-y: scroll;
            padding: .3rem 0;

            &::-webkit-scrollbar {
                display: none;
            }

            li {
                box-sizing: border-box;
                text-align: center;
                width: 100%;
                padding: .3rem;

                div {
                    box-sizing: border-box;
                    width: 100%;

                    padding: .2rem .4rem;

                    color: rgb(102, 102, 102);

                    span {
                        font-size: .7rem;
                        display: block;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                }

                .current {
                    background: linear-gradient(to right, rgb(241, 83, 56), rgb(223, 20, 15));
                    color: white;
                    border-radius: 1rem;
                }


            }


        }

        .items {
            flex-grow: 1;
            height: 100%;
            overflow: auto;

            &::-webkit-scrollbar {
                display: none;
            }

            li {
                // height: 100%;
            }

            // &::-webkit-scrollbar {
            //     width: 8px;
            // }

            // &::-webkit-scrollbar-thumb {
            //     background: linear-gradient(orange, red);
            //     border-radius: 8px;
            // }

            // &::-webkit-scrollbar-track {
            //     background: pink;
            // }
        }
    }
}